<template>
    <div class="personinfomation">
        <!-- 左边内容部分 -->
        <div class="content_left">
            <div class="border_style">
                <div class="content_left1">
                    <!-- 头像 -->
                    <div><img src="../assets/704.jpg" height="88px" class="header_img"></div>
                    <!-- 信息文本 -->
                    <div class="text_l10">
                        <div class="text_l100">
                            <strong>{{ user.name }}</strong>
                            <img src="../assets/705.svg" height="18px">
                            <div class="edit_btn"><el-link icon="el-icon-edit">编辑</el-link></div>
                        </div>
                        <div class="text_l110">{{ experience.schoolName }}/{{ experience.education }}/{{
                            message.identity }}/{{ message.age }}岁</div>
                        <div class="text_l130">
                            <div class="text_l131">
                                <img src="../assets/375.svg" height="15px">
                                <span>{{ message.phone }}</span>
                            </div>
                            <div class="text_l131">
                                <img src="../assets/376.svg" height="15px">
                                <span>{{ user.email }}</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="content_l100">
                    <!-- 自我描述 -->
                    <div class="content_lcom"><strong>自我描述</strong></div>
                    <!-- 标签 -->
                    <div class="tabel_l101">
                        <span class="text_l102">个人能力</span>
                        <span class="text_l102">执行力</span>
                        <span class="text_l102">团队精神</span>
                    </div>
                    <!-- 自我描述内容 -->
                    <div class="text_l103">
                        <textarea name="" id="" cols="100" rows="4" readonly>{{ educationContent.text }}
                    </textarea>
                    </div>
                    <!-- 教育经历 -->
                    <div class="text_l104">
                        <div class="content_lcom"><strong>教育经历</strong></div>
                        <button class="text_l105">
                            <img src="../assets/377.svg" height="16px" class="image_l105">
                            添加
                        </button>
                    </div>
                    <!-- 教育经历列表 -->
                    <div class="content_l06">
                        <div>
                            <img src="../assets/509.png" height="46px" class="header_img">
                        </div>
                        <div class="text_l107">
                            <div class="text_l108"><strong>{{ experience.schoolName }}</strong></div>
                            <div class="text_l109"><span>{{ experience.education }}/{{ experience.profession }}</span>
                            </div>
                        </div>
                    </div>
                    <!-- 工作经历 -->
                    <div class="text_l104">
                        <div class="content_lcom"><strong>工作经历</strong></div>
                        <button class="text_l105">
                            <img src="../assets/377.svg" height="16px" class="image_l105">
                            添加
                        </button>
                    </div>
                    <!-- 工作经历列表 -->
                    <div class="content_l06">
                        <div>
                            <img src="../assets/509.png" height="46px" class="header_img">
                        </div>
                        <div class="text_l107">
                            <div class="text_l108"><strong>开发公司/前端开发工程师</strong></div>
                            <div class="text_l109"><span>产品经理</span></div>
                        </div>
                    </div>
                    <!-- 工作经历标签 -->
                    <div>
                        <div class="tabel_l101">
                            <span class="text_l102">个人能力</span>
                            <span class="text_l102">执行力</span>
                            <span class="text_l102">团队精神</span>
                        </div>
                    </div>
                    <!-- 工作经历描述内容 -->
                    <div class="text_l103">
                        <textarea name="" id="" cols="100" rows="4" readonly>{{ educationContent.text }}
                    </textarea>
                    </div>
                    <!-- 项目经历 -->
                    <div class="text_l104">
                        <div class="content_lcom"><strong>项目经历</strong></div>
                        <button class="text_l105">
                            <img src="../assets/377.svg" height="16px" class="image_l105">
                            添加
                        </button>
                    </div>
                    <div class="text_l1110">
                        <div class="text_l1111"><strong>原型工具制作</strong></div>
                        <ol class="text_l1112">
                            <li>负责大米的线上产品整体规划及产品设计</li>
                            <li>负责收集、分析需求优先级</li>
                            <li>参与和配合相应产品线运营策划</li>
                        </ol>
                        <div class="text_l1113"><span>项目链接:https://www.xiaopiu.com</span></div>
                    </div>
                    <!-- 社交主页 -->
                    <div class="text_l104">
                        <div class="content_lcom"><strong>社交主页</strong></div>
                        <button class="text_l105">
                            <img src="../assets/377.svg" height="16px" class="image_l105">
                            添加
                        </button>
                    </div>
                    <div class="text_l1114" v-for="value in source">
                        <div class="image_l1115">
                            <img :src=value.src height="24px" class="header_img">
                            <div><span class="text_l1116">{{ value.web }}</span></div>
                        </div>
                    </div>
                    <!-- 图片作品 -->
                    <div class="text_l104">
                        <div class="content_lcom"><strong>图片作品</strong></div>
                        <button class="text_l105">
                            <img src="../assets/377.svg" height="16px" class="image_l105">
                            添加
                        </button>
                    </div>
                    <!-- 图片列表 -->
                    <div class="image_l1117">
                        <div class="image_l1118" v-for="image in images">
                            <img :src="image.src" class="image_l1119">
                        </div>
                    </div>
                </div>
            </div>
            <div class="button_l1120">
                <!-- 保存简历到本地 -->
                <div class="button_l1121">
                    <button class="button_l1122">
                        <img src="../assets/401.svg" height="14">
                        把这份简历保存到本地
                    </button>
                </div>
                <!-- 更新时间 -->
                <div class="button_l1121">
                    <span>简历更新于2018-11-21 17:04</span>
                </div>
            </div>
        </div>
        <!-- 右边内容部分 -->
        <div class="content_right">
            <!-- 求职意向 -->
            <div class="content_r1000">
                <div class="text_r1002">
                    <strong>求职意向</strong>
                    <div class="edit_btn"><el-link icon="el-icon-edit">编辑</el-link></div>
                </div>
                <div class="text_r1000"><img src="../assets/414_1.svg" class="image_r1000">{{ form.career }}</div>
                <div class="text_r1000"><img src="../assets/414_2.svg" class="image_r1000">{{ form.attribute }}</div>
                <div class="text_r1000"><img src="../assets/414_3.svg" class="image_r1000">{{ form.area }}</div>
                <div class="text_r1000"><img src="../assets/414_4.svg" class="image_r1000">{{ form.minSalary }}-{{
                    form.maxSalary }}</div>
                <div class="text_r1000"><img src="../assets/414_5.svg" class="image_r1000">{{ form.status }}/{{
                    form.dutyTime }}</div>
            </div>
            <!-- 上传附件 -->
            <div class="content_r2000">
                <button class="btn_r2001">
                    <img src="../assets/752.svg" class="image_r2001">
                    我要上传附件
                </button>
            </div>
            <!-- 简历完整度 -->
            <div class="conten_r3000">
                <div class="text_r3001">
                    <span class="text_r3002">简历完整度：100分</span>
                    <button class="btn_r3003">预览简历</button>
                </div>
                <div>
                    <el-progress :percentage="100" status="success"></el-progress>
                </div>
            </div>
            <!-- 基本信息 -->
            <div class="conten_r4000">
                <button class="btn_r4001">
                    <img src="../assets/428_2.svg" class="image_r4001">
                    <span>基本信息</span>
                </button>
                <button class="btn_r4001">
                    <img src="../assets/428_1.svg" class="image_r4001">
                    <span>个人能力</span>
                </button>
                <button class="btn_r4001">
                    <img src="../assets/428_3.svg" class="image_r4001">
                    <span>工作经验</span>
                </button>
                <button class="btn_r4001">
                    <img src="../assets/428_4.svg" class="image_r4001">
                    <span>项目经验</span>
                </button>
                <button class="btn_r4001">
                    <img src="../assets/428_5.svg" class="image_r4001">
                    <span>教育经历</span>
                </button>
                <button class="btn_r4001">
                    <img src="../assets/428_6.svg" class="image_r4001">
                    <span>社交主页</span>
                </button>
                <button class="btn_r4001">
                    <img src="../assets/428_7.svg" class="image_r4001">
                    <span>图片作品</span>
                </button>
            </div>
        </div>
    </div>
</template>

<script>
import "@/assets/css/global.css"
import { mapState } from "vuex"

export default {
    name: 'PersonInfomation',
    computed: {
        ...mapState(['user', 'experience', 'form'])
    },
    data() {
        return {
            message: {
                name: '李小锅',
                schoolName: '清华大学',
                education: '本科',
                identity: '应届毕业生',
                age: 21,
                phone: '13478654634',
                email: "2347856742@sina.com"
            },
            educationContent: {
                text: "本人性格热情开朗，待人友好，为人诚实谦虚。工作勤奋，认真负责，能吃苦耐劳，尽职尽责，有耐心。具有亲和力，平易近人，善于与人沟通。学习刻苦认真，成绩优秀，名列前茅。品学兼优，连续三年获得学院奖学金。",
            },
            source: [
                { src: require("../assets/509.png"), web: "https://www.xiaopiu.com" },
                { src: require("../assets/ui.svg"), web: "https://www.ui.cn/" },
                { src: require("../assets/zhihu.svg"), web: "https://www.zhihu.com/" },
                { src: require("../assets/zcool.svg"), web: "https://www.zcool.com.cn/" },
            ],
            images: [
                { src: require("../assets/724_1.jpeg") },
                { src: require("../assets/724_2.jpeg") },
                { src: require("../assets/724_1.jpeg") },
                { src: require("../assets/724_2.jpeg") },
                { src: require("../assets/724_1.jpeg") },
                { src: require("../assets/724_2.jpeg") },
            ],
        }
    },
    methods: {
        switchAccount() {
            this.$router.push('/login')
        },
        logout() {
            this.$router.push('/')
        },
        dropInBox() {
            this.$router.push('/dropinbox')
        }

    }

}
</script>

<style scoped>
.personinfomation {
    display: flex;
    margin-bottom: 40px;

}

a {
    text-decoration: none;
    color: rgba(0, 179, 138, 1);

}

.content_left {
    margin-top: 120px;
    margin-left: 200px;
    width: 700px;
    border-radius: 4px;
}

.border_style {
    border: rgba(229, 229, 229, 1) solid 1px;
}

.content_right {
    margin-top: 120px;
    margin-left: 30px;
    width: 280px;
    height: 300px;
}

.content_r1000 {
    padding: 20px;
    border: rgba(229, 229, 229, 1) solid 1px;
    border-radius: 4px;
}

.text_r1002 {
    margin-bottom: 15px;
}

.text_r1000 {
    color: rgba(128, 128, 128, 1);
    font-size: 14px;
    display: flex;
    align-items: center;
    margin-bottom: 14px;
    padding-left: 10px;
}


.image_r1000 {
    height: 20px;
    margin-right: 8px;
}

.image_r2001 {
    height: 14px;
    margin-right: 5px;
}

.content_r2000 {
    margin-top: 20px;
}

.btn_r2001 {

    width: 100%;
    height: 100px;
    border-radius: 4px;
    border: rgba(229, 229, 229, 1) solid 1px;
    background-color: rgba(250, 250, 250, 1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.content_left1 {
    padding: 30px 30px;
    background-color: rgba(250, 250, 250, 1);
    border-radius: 5px 5px 0px 0px;
    border-bottom: 1px solid rgba(229, 229, 229, 1);
    display: flex;
}

.text_l10 {
    flex: 1;
}

.text_l100 {
    font-size: 26px;
}

.text_l110 {
    margin-top: 10px;
    font-size: 14px;
    color: rgba(80, 80, 80, 1);
    letter-spacing: 1.5px;
}

.text_l130 {
    margin-top: 15px;
    font-size: 14px;
    color: rgba(80, 80, 80, 1);
    display: flex;
}

.text_l131 {
    margin-right: 25px;
    display: flex;
    align-items: center;
}

.header_img {
    clip-path: circle();
}

.name {
    flex: 1;
    display: flex;
}

.edit_btn {
    float: right;
}

.content_l100 {
    margin-top: 40px;
    padding: 0px 30px;
    width: 100%;
}

.content_lcom {
    font-size: 18px;
    padding-left: 3px;
    border-left: rgba(0, 179, 138, 1) solid 4px;
}

.tabel_l101 {
    font-size: 10px;
    margin-top: 25px;
    padding-left: 10px;
    color: rgba(166, 166, 166, 1);
}

.text_l102 {
    margin-right: 15px;
    padding: 3px 5px;
    border: rgba(166, 166, 166, 1) solid 1px;
    border-radius: 10px;
}

.text_l103 {
    margin-top: 25px;
    text-align: center;
    font-family: "Microsoft YaHei", "微软雅黑", sans-serif;
}

textarea:focus {
    outline: none;
}

.el-textarea__inner {
    font-family: "Microsoft YaHei", "微软雅黑", sans-serif !important;
}

textarea[readonly] {
    border: none;
    font-size: 13px;
    letter-spacing: 1.2px;
    line-height: 1.5;
    color: rgba(80, 80, 80, 1);
    resize: none;
    /* 禁止拖拽大小（可选） */
}

.text_l104 {
    display: flex;
    justify-content: space-between;
}

.text_l105 {
    display: flex;
    align-items: center;
    color: rgba(76, 176, 141, 1);
    background-color: white;
    border: none;
    cursor: pointer;
}

.image_l105 {
    margin-right: 5px;
}

.content_l06 {
    margin: 30px 0px;
    display: flex;
}

.text_l107 {
    margin-left: 10px;
    font-size: 14px;

}

.text_l108 {
    margin-bottom: 8px;
}

.text_l109 {
    color: rgba(56, 56, 56, 1);
}

.text_l1110 {
    margin-top: 20px;
    margin-bottom: 20px;
    font-size: 14px;
}

.text_l1111 {
    margin-bottom: 20px;
}

.text_l1112 {
    margin-left: 15px;
    line-height: 2;
    color: rgba(80, 80, 80, 1);
}

.text_l1113 {
    margin-top: 20px;
    color: rgba(80, 80, 80, 1);
}

.text_l1114 {
    margin: 30px 0px;
}

.image_l1115 {
    margin-bottom: 12px;
    font-size: 14px;
    display: flex;
    align-items: center;
    color: rgba(56, 56, 56, 1);
}

.text_l1116 {
    margin-left: 10px;
}

.image_l1117 {
    height: 400px;
    width: 660px;
    margin-top: 20px;
    margin-bottom: 30px;
}

.image_l1118 {
    height: 190px;
    width: 203px;
    margin-right: 17px;
    margin-bottom: 20px;
    display: inline-block;
}

.image_l1119 {
    height: 190px;
    border-radius: 4px;
    width: 203px;
}

.button_l1120 {
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
}

.button_l1121 {
    font-size: 14px;
    color: rgba(229, 229, 229, 1);
}

.button_l1122 {
    color: rgba(229, 229, 229, 1);
    border: none;
    background-color: white;
    display: flex;
    align-items: center;
}

.foot_content {
    position: absolute;
    margin-top: 40px;
    width: 100%;
    bottom: 0;
    padding-top: 50px;
    border-top: rgba(229, 229, 229, 1) solid 1px;
}

.content_fl000 {
    display: flex;
}

.link_l001 {
    padding: 0px 100px;
    height: 180px;
    text-align: center;
    border-right: rgba(210, 210, 210, 1) solid 1px;
}

.button_f1002 {
    margin-bottom: 16px;
}

.button_f1003 {
    padding: 8px 30px;
    width: 100%;
    font-size: 14px;
    color: rgba(0, 179, 138, 1);
    border-radius: 4px;
    background-color: white;
    border: rgba(0, 179, 138, 1) solid 1px;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.image_fl1004 {
    height: 20px;
    margin-right: 5px;
}

.image_fl1005 {
    height: 16px;
    margin-right: 5px;
}

.text_fl1005 {
    display: flex;
}

.text_f1006 {
    display: flex;
    align-items: center;
    margin-right: 20px;
}

.a_linkf1007 {
    color: rgba(210, 210, 210, 1);
    font-size: 12px;
    ;
}

.image_fl1006 {
    height: 16px;
    margin-right: 8px;
    filter: saturate(0);
}

.text_fl1008 {
    padding-left: 150px;
}

.text_fl1009 {
    font-size: 18px;
    margin-bottom: 20px;
}

.text_fl1010 {
    color: rgba(80, 80, 80, 1);
    font-size: 14px;
}

.text_fl1011 {
    margin-bottom: 15px;
}

.content_f2000 {
    height: 100px;
    margin-top: 30px;
    font-size: 13px;
    color: rgba(166, 166, 166, 1);
    display: flex;
    align-items: center;
    background-color: rgba(250, 250, 250, 1);
}

.text_f2001 {
    margin-left: 80px;
    margin-right: 30px;
}

.text_f2002 {
    display: flex;
    align-items: center;
    margin-right: 40px;
}

.text_f2003 {
    margin-right: 40px;
    padding: 8px;
    display: flex;
    align-items: center;
    border: rgba(229, 229, 229, 1) solid 1px;
}

.image_f12001 {
    height: 18px;
}

.image_f12002 {
    height: 28px;
    margin-right: 5px;
}

.image_f12003 {
    height: 30px;
}

.text_f2004 {
    flex: 1;
    text-align: right;
    margin-right: 100px;
}

.text_f2005 {
    display: flex;
    flex-direction: column;
}

.conten_r3000 {
    margin-top: 15px;
    padding: 20px;
    border: rgba(229, 229, 229, 1) solid 1px;
    border-radius: 4px;
    background-color: rgba(250, 250, 250, 1)
}

.text_r3001 {
    font-size: 12px;
    margin-bottom: 10px;
    color: rgba(80, 80, 80, 1);
    display: flex;
    justify-content: space-between;
}

.btn_r3003 {
    font-size: 12px;
    color: rgba(0, 179, 138, 1);
    border: none;
    background-color: white;
    cursor: pointer;
}

.conten_r4000 {
    margin-top: 20px;
    padding: 20px;
    border: rgba(229, 229, 229, 1) solid 1px;
    border-radius: 4px;
    background-color: rgba(250, 250, 250, 1);
    display: flex;
    flex-direction: column;
}

.btn_r4001 {
    padding: 10px;
    font-size: 12px;
    display: flex;
    align-items: center;
    border: none;
    background-color: transparent;
    cursor: pointer;
}

.image_r4001 {
    height: 20px;
    margin-right: 5px;
}

.btn_r4001:hover {
    border-left: rgba(0, 179, 138, 1) solid 3px;
    color: rgba(0, 179, 138, 1);
}
</style>